<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="任务详情"
    width="800px"
    :before-close="handleClose"
  >
    <div v-if="task" class="task-detail">
      <!-- 基本信息 -->
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="任务名称">
          {{ task.taskName }}
        </el-descriptions-item>
        <el-descriptions-item label="查询ID">
          {{ task.queryId }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStateType(task.state)" size="small">
            {{ getStateText(task.state) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatTime(task.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="完成时间" v-if="task.finishTime">
          {{ formatTime(task.finishTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="过期时间" v-if="task.expireTime">
          {{ formatTime(task.expireTime) }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 数据库信息 -->
      <el-descriptions title="数据库信息" :column="2" border class="mt-20">
        <el-descriptions-item label="目录">
          {{ task.catalog }}
        </el-descriptions-item>
        <el-descriptions-item label="数据库">
          {{ task.database }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 任务定义 -->
      <div class="mt-20">
        <h4>任务定义</h4>
        <el-input
          v-model="task.definition"
          type="textarea"
          :rows="4"
          readonly
          class="mt-10"
        />
      </div>

      <!-- 错误信息 -->
      <div v-if="task.errorMessage" class="mt-20">
        <h4>错误信息</h4>
        <el-alert
          :title="`错误代码: ${task.errorCode}`"
          :description="task.errorMessage"
          type="error"
          :closable="false"
          show-icon
          class="mt-10"
        />
      </div>

      <!-- 额外信息 -->
      <div v-if="task.extraMessage" class="mt-20">
        <h4>额外信息</h4>
        <el-input
          v-model="task.extraMessage"
          type="textarea"
          :rows="3"
          readonly
          class="mt-10"
        />
      </div>

      <!-- 属性信息 -->
      <div v-if="task.properties" class="mt-20">
        <h4>属性信息</h4>
        <el-input
          v-model="task.properties"
          type="textarea"
          :rows="3"
          readonly
          class="mt-10"
        />
      </div>

      <!-- 进度信息 -->
      <div v-if="task.progress" class="mt-20">
        <h4>执行进度</h4>
        <el-progress
          :percentage="parseProgress(task.progress)"
          :status="getProgressStatus(task.state)"
          class="mt-10"
        />
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">


interface TaskDetailProps {
  task: {
    queryId: string
    taskName: string
    createTime: string
    finishTime?: string
    state: string
    catalog: string
    database: string
    definition: string
    expireTime?: string
    errorCode?: number
    errorMessage?: string
    progress?: string
    extraMessage?: string
    properties?: string
  } | null
  visible: boolean
}

const _props = defineProps<TaskDetailProps>()
const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()

const handleClose = () => {
  emit('update:visible', false)
}

// 获取状态类型
const getStateType = (state: string): string => {
  const types: Record<string, string> = {
    'RUNNING': 'primary',
    'FINISHED': 'success',
    'FAILED': 'danger',
    'CANCELED': 'warning'
  }
  return types[state] || 'info'
}

// 获取状态文本
const getStateText = (state: string): string => {
  const texts: Record<string, string> = {
    'RUNNING': '运行中',
    'FINISHED': '已完成',
    'FAILED': '失败',
    'CANCELED': '已取消'
  }
  return texts[state] || state
}

// 格式化时间
const formatTime = (time: string): string => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

// 解析进度
const parseProgress = (progress: string): number => {
  if (!progress) return 0
  const match = progress.match(/(\d+)%/)
  return match ? parseInt(match[1]) : 0
}

// 获取进度状态
const getProgressStatus = (state: string): 'success' | 'exception' | undefined => {
  if (state === 'FAILED') return 'exception'
  if (state === 'FINISHED') return 'success'
  return undefined
}
</script>

<style scoped>
.task-detail {
  max-height: 600px;
  overflow-y: auto;
}

.mt-20 {
  margin-top: 20px;
}

.mt-10 {
  margin-top: 10px;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: var(--font-title);
  font-weight: 500;
}

.el-descriptions {
  margin-bottom: 20px;
}
</style> 